{extend name='layout:app'}

{block name='css'}
<link rel="stylesheet" href="__STATIC__/css/jquery-weui.min.css">
<link rel="stylesheet" href="__STATIC__/css/addr-edit.css">
{/block}

{block name='content'}
    <div id="app">
        <div class="nav">
            <i class="el-icon-arrow-left icon_left" @click="back"></i>
            <div>地址编辑</div>
            <i class="iconfont icon-home icon_right" @click="home"></i>
        </div>

        <div class="edit-area">
            <el-input type="hidden" v-model="id"></el-input>
            <div class="edit-item">
                <el-input
                        placeholder="请输入内容"
                        prefix-icon="iconfont icon-user-"
                        v-model="name" clearable>
                </el-input>
            </div>
            <div class="edit-item">
                <el-input
                        placeholder="请输入内容"
                        prefix-icon="iconfont icon-phone"
                        v-model="phone" clearable>
                </el-input>
            </div>
            <div class="edit-item set-city-picker">
                <el-input
                        placeholder="请选择省市区/县"
                        prefix-icon="iconfont icon-building"
                        suffix-icon="el-icon-arrow-right"
                        v-model="addr">
                </el-input>
            </div>
            <div class="edit-item">
                <el-input
                        placeholder="详细地址（如学校、宿舍楼、楼层、门牌号）"
                        prefix-icon="iconfont icon-address"
                        v-model="detailAddr" clearable>
                </el-input>
            </div>
        </div>


        <div class="btn-area">
            <div class="order">
                <el-button type="primary" @click="save">保存</el-button>
            </div>
        </div>
    </div>
{/block}

{block name='footer'}{/block}

{block name='js'}
<script src="__STATIC__/js/jQuery-weui.min.js"></script>
<script src="__STATIC__/js/city-picker.min.js"></script>
<script>
    var that;
    new Vue({
        el:'#app',
        data: {
            id: '',
            name: '',
            phone: '',
            addr: '',
            detailAddr: '',
        },
        created() {
            that = this
            let addr = sessionStorage.getItem('addr')
            if(addr){
                addr = JSON.parse(addr)
                this.id = addr.id
                this.name = addr.name
                this.phone = addr.phone
                let main = addr.addr.split(' ')
                this.addr = `${main[0]} ${main[1]} ${main[2]} `
                this.detailAddr = `${main[3]}`
            }

            setTimeout(() => {
                $('.set-city-picker').find('input').attr('id', 'city-picker')
                $("#city-picker").cityPicker({
                    title: "选择省市区/县",
                    onChange: function (picker, values, displayValues) {
                        console.log(values, displayValues);
                        that.addr = `${displayValues[0]} ${displayValues[1]} ${displayValues[2]}`
                    }
                });
            }, 50)
            // $("#city-picker").picker("setValue", ["110000", "110000", "110108"]);

        },
        methods: {
            back() {
                window.history.go(-1)
            },
            home() {
                location.href = '/'
            },
            save() {
                console.log(this.addr);
                $.post('/index/person/addrsave',{
                    addr_id: that.id,
                    name: that.name,
                    phone: that.phone,
                    addr: that.addr,
                    detail_addr: that.detailAddr
                },function (res) {
                    console.log(res);
                    if(res.code === 0) {
                        window.history.go(-1);
                    }
                },'json')
            }
        }
    });





</script>
{/block}